<template>
    <div class="nav-bar">
        <div class="nav-bar__container">
            <router-link class="nav-bar__item"
                tag="div"
                :to="{
                    path: route.link
                }"
                v-for="route in router"
                :key="route.link"
                @click.native="gotoLink(route.id)"
                >
                <!-- <p class="nav-bar__item__icon"
                > -->
                    <i class="nav-bar__item__icon" :class="route.icon"></i>
                <!-- </p> -->
                <p class="nav-bar__item__text">
                    {{
                        route.text
                    }}
                </p>
            </router-link>
        </div>
        <!-- <mt-popup
            v-model="popupVisible"
            position="bottom">
            <ul> 
                <li v-for="list in UcompanyList" @click="release(list.id)" :key="list.id">{{list.name}}</li>
            </ul>
        </mt-popup> -->
        <!-- 发布 -->
      <mt-actionsheet
        :actions="UcompanyList"
        v-model="popupVisible"
        >
      </mt-actionsheet>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
    name: 'NavBar',
    data () {
        return {
            // 发布弹框
            // actions: [
            //     {
            //         id:1,
            //         name:'发布产品',
            //     },
            //     {
            //         id:2,
            //         name:'发布新闻',
            //     }
            // ],
            // sheetVisible: false,
            popupVisible:false,
            UcompanyList:[
                {
                    id:1,
                    name: '添加产品',
                    method : this.getProduct // 调用methods中的函数
                },
                {
                    id:2,
                    name:'添加新闻',
                    method : this.getNews // 调用methods中的函数
                }
            ],
            router: [
                {
                    text: '友圈',
                    link: '/home',
                    icon: 'iconfont icon-youquanlogozhuanhuan',
                    id: 1
                },
                {
                    text: '消息',
                    link: '/information',
                    icon: 'iconfont icon-xiaoxi1',
                    id: 2
                },
                {
                    text: '发布',
                    link: '',
                    icon: 'iconfont icon-bianji1',
                    id: 3
                },
                {
                    text: '我的',
                    link: '/userCenter',
                    icon: 'iconfont icon-wode1',
                    id: 4
                },
            ],
            userInfo: ''
        }
    },
    mounted() {
      this.userInfo = window.localStorage.getItem('userInfo');
      this.userInfo = JSON.parse(this.userInfo);
    },
    methods: {
                // @click.native="gotoLink(route.alink, route.link, route.id)"
        gotoLink (id ) {
            //首先判断是否登录
            // if(!this.userInfo){
            //     this.$router.push({
            //         path: '/login'
            //     });
            // }

            //再判断登录后的状态
            if(id == 3){
                if(!this.userInfo){
                    this.$router.push({
                        path: '/login'
                    });
                }
                else if(this.userInfo.adminstatus == 1) {
                    this.popupVisible = !this.popupVisible;
                }else {
                    this.popupVisible = false;
                    MessageBox.alert('企业管理员才能发布哦').then(action => {
                        this.$router.push({
                            path: '/companyCreate'
                        });
                    });
                }
            }    
        },
        // release(id){
        //     if(id == 1){//发布产品
                

        //     }else{//发布新闻
                
        //     }
        // },

        //发布产品
        getProduct: function(){
            this.$store.commit('setPage', 1);//设置需要预请求的参数
            let access_token = window.localStorage.getItem('access_token');
            let timer = window.localStorage.getItem('timer');
            if(!access_token || !timer) {
                this.$router.push({path: '/login'}); 
            }else {
                this.$post(
                    this.$path + '/api.php/company/getAuthCompanyList', {
                    userId: this.userInfo.uid,
                    type:1
                    })
                .then((res) => {
                    if (res.code == '-1') {
                    MessageBox.alert('企业管理员才能添加产品哦').then(action => {
                        this.$router.push({
                        path: '/companyCreate'
                        });
                    });
                    } else {
                    this.$router.push({path: '/userCenter/productInsert',query: {cpId: 0}});
                    }

                })
            }
        },

        //发布新闻
        getNews: function(){
            this.$store.commit('setPage', 1);//设置需要预请求的参数
            let access_token = window.localStorage.getItem('access_token');
            let timer = window.localStorage.getItem('timer');
            if(!access_token || !timer) {
                this.$router.push({path: '/login'}); 
            }else {
                 this.$post(
                    this.$path + '/api.php/company/getAuthCompanyList', {
                    userId: this.userInfo.uid,
                    type:1
                    })
                .then((res) => {
                    if (res.code == '-1') {
                    MessageBox.alert('企业管理员才能添加新闻哦').then(action => {
                        this.$router.push({
                        path: '/companyCreate'
                        });
                    });
                    } else {
                    this.$router.push({path: '/userCenter/newsInsert',query: {cpId: 0}});
                    }

                });
            }
        },

        // isLogin(url,id) {
        //     agentMemberController.isLogin().then((respData) => {
        //         if(id == 3) {
        //             if(respData){
        //                 url = '/wode/member';
        //             }else {
        //                 url = '/wode/orders';
        //             }
        //         }
        //         this.$router.push({
        //             path: url
        //         })
        //     }).catch(err=> {
        //         console.log(err);
        //     });
        // },
    },
}
</script>
<style lang="scss" scoped>
$color: #e50838;

    .nav-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        &__container {
            border-top: 1px solid #d8d8d8;
            box-sizing: border-box;
            height: 1.1rem;
            background-color: #fff;
            display: flex;
        }
        &__item {
            flex: 1;
            text-align: center;
            color: #999;
            line-height: 1;
            box-sizing: border-box;
            padding: .2rem .1rem 0 .1rem;
            &__icon {
                width: 0.48rem;
                height: 0.48rem;
                vertical-align: -0.15em;
                fill: currentColor;
                overflow: hidden;
                font-size: 0.48rem;
                color: #333;
                display: block;
                margin: 0 auto;
                &--active {
                    color: $color;
                }
            }
            &__text {
                font-size: .24rem;
                color: #333;
                &--active {
                    color: $color;
                }
            }
            &.router-link-active {
                .nav-bar__item {
                    &__text,
                    &__icon {
                        color: $color;
                    }
                }
            }
            &.router-link-active:nth-child(3) {
                .nav-bar__item {
                    &__text,
                    &__icon {
                        color: #333;
                    }
                }
            }
        }
    }
</style>
